<template>
  <!-- 事件修饰符 -->
  <div @click="onDivClick">
    <!-- .prevent: 阻止默认行为 -->
    <a href="https://baidu.com" @click.prevent>百度一下</a>
    <!-- .stop: 阻止冒泡，同名事件不会向上级传递 -->
    <p @click.stop="onPClick"></p>
    <!-- 修饰符的链式调用: 表明两个同时阻止 -->
    <a href="https://baidu.com" @click.stop.prevent>百度一下</a>
  </div>
  <!-- 按键指令 -->
  <div>
    <input type="text" v-on:keydown.enter="print" />
  </div>
</template>

<script setup>
const print = () => {
  console.log("keydown");
};
</script>

<style scoped>
div {
  width: 400px;
  height: 200px;
  background: plum;
}
div a {
  display: block;
  width: 100px;
  text-decoration: none;
  background: tomato;
  text-align: center;
  color: #fff;
}
div p {
  width: 200px;
  height: 100px;
  background: rebeccapurple;
}
</style>
